<template>
  <div class="app-container p-6">
    <!-- 页面标题和操作按钮 - 完全匹配原型 -->
    <div class="page-header-section flex flex-col md:flex-row md:items-center md:justify-between mb-6">
      <div class="page-title-area">
        <h1 class="text-2xl font-bold text-text-primary">组织架构管理</h1>
        <p class="text-text-muted mt-2">查看和管理公司的组织架构、部门信息及成员</p>
      </div>
      <div class="page-actions-area mt-4 md:mt-0">
        <!-- 主要操作按钮 -->
        <button
          @click="handleAdd"
          v-hasPermi="['system:dept:add']"
          class="primary-action-btn bg-primary hover:bg-primary-hover text-white px-6 py-2 rounded-md flex items-center shadow-card transition-all"
        >
          <i class="fas fa-plus mr-2"></i>
          <span>新增部门</span>
        </button>
        
        <!-- 次要操作按钮组 -->
        <div class="secondary-actions-group mt-3 md:mt-2 flex flex-wrap gap-2">
          <button
            @click="handleImport"
            v-hasPermi="['system:dept:import']"
            class="secondary-action-btn px-4 py-1.5 border border-border rounded-md text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors flex items-center text-sm"
          >
            <i class="fas fa-upload mr-1.5"></i>
            <span>导入部门</span>
          </button>
          <button
            @click="handleExport"
            v-hasPermi="['system:dept:export']"
            class="secondary-action-btn px-4 py-1.5 border border-border rounded-md text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors flex items-center text-sm"
          >
            <i class="fas fa-download mr-1.5"></i>
            <span>导出部门</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 组织架构图和部门详情区域 -->
    <div class="content-wrapper">
      <!-- 组织架构树 -->
      <div class="org-tree-container">
        <el-card class="org-tree-card">
          <div class="org-tree-header">
            <span class="org-tree-title">组织架构</span>
            <div class="org-tree-actions">
              <el-button v-hasPermi="['system:dept:expandAll']" type="text" icon="el-icon-caret-bottom" size="small" @click="expandAllTree" title="展开全部"></el-button>
              <el-button v-hasPermi="['system:dept:collapseAll']" type="text" icon="el-icon-caret-right" size="small" @click="collapseAllTree" title="收起全部"></el-button>
            </div>
          </div>
          
          <!-- 组织架构树内容 -->
          <div class="org-tree-content">
            <el-tree
              v-loading="loading"
              node-key="id"
              :data="orgTreeData"
              :props="orgTreeProps"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              ref="orgTree"
            >
              <template #default="{ node, data }">
                <div class="org-tree-item" :class="{ 'org-tree-item-active': selectedDeptId === data.id }">
                  <el-icon v-if="node.isLeaf" :class="getDeptIconClass(data.type)"><OfficeBuilding /></el-icon>
                  <el-icon v-else :class="getDeptIconClass(data.type)"><OfficeBuilding /></el-icon>
                  <span>{{ data.name }}</span>
                </div>
              </template>
            </el-tree>
          </div>
          
          <!-- 组织架构统计信息 -->
          <div class="org-tree-footer">
            共 <span class="org-tree-count">{{ totalDepts }}</span> 个部门，
            <span class="org-tree-count">{{ totalMembers }}</span> 名成员
          </div>
        </el-card>
      </div>
      
      <!-- 部门详情和成员列表 -->
      <div class="dept-detail-container">
        <!-- 部门详情卡片 -->
        <el-card class="dept-detail-card" v-if="selectedDept">
          <div class="dept-detail-header">
            <span class="dept-detail-title">部门详情</span>
          </div>
          
          <!-- 部门详情内容 -->
          <div class="dept-detail-content">
            <div class="dept-detail-header-info">
              <div class="dept-detail-icon">
                <el-icon :class="getDeptIconClass(selectedDept.type)"><OfficeBuilding /></el-icon>
              </div>
              <div class="dept-detail-name">
                <h3>{{ selectedDept.name }}</h3>
                <p>{{ selectedDept.type === 'company' ? '公司总部' : '部门' }}</p>
              </div>
              <div class="dept-detail-actions">
                <el-button v-hasPermi="['system:dept:edit']" type="default" size="small" icon="el-icon-edit" @click="handleEdit">
                  编辑
                </el-button>
                <el-button v-hasPermi="['system:dept:delete']" type="danger" size="small" icon="el-icon-delete" @click="handleDelete">
                  删除
                </el-button>
              </div>
            </div>
            
            <div class="dept-detail-info">
              <!-- 基本信息 -->
              <div class="dept-detail-section">
                <h4>基本信息</h4>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">部门负责人:</span>
                  <span class="dept-detail-value">{{ selectedDept.leader || '无' }}</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">成立时间:</span>
                  <span class="dept-detail-value">{{ selectedDept.createTime }}</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">部门级别:</span>
                  <span class="dept-detail-value">{{ selectedDept.level }}级部门</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">所属公司:</span>
                  <span class="dept-detail-value">{{ selectedDept.companyName }}</span>
                </div>
              </div>
              
              <!-- 人员信息 -->
              <div class="dept-detail-section">
                <h4>人员信息</h4>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">成员总数:</span>
                  <span class="dept-detail-value">{{ selectedDept.memberCount }}人</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">管理人员:</span>
                  <span class="dept-detail-value">{{ selectedDept.managerCount }}人</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">在职状态:</span>
                  <span class="dept-detail-value">{{ selectedDept.status === 1 ? '正常' : '禁用' }}</span>
                </div>
                <div class="dept-detail-item">
                  <span class="dept-detail-label">部门状态:</span>
                  <span class="dept-detail-value">{{ selectedDept.active ? '正常' : '禁用' }}</span>
                </div>
              </div>
            </div>
            
            <!-- 部门描述 -->
            <div class="dept-detail-description">
              <h4>部门描述</h4>
              <div class="dept-detail-desc-content">
                {{ selectedDept.description || '暂无描述' }}
              </div>
            </div>
          </div>
        </el-card>
        
        <!-- 部门成员列表 -->
        <el-card class="dept-member-card">
          <div class="dept-member-header">
            <span class="dept-member-title">部门成员</span>
            <div class="dept-member-actions">
              <el-button v-hasPermi="['system:dept:addMember']" type="primary" size="small" icon="el-icon-plus" @click="handleAddMember">
                添加成员
              </el-button>
              <el-button v-hasPermi="['system:dept:batchMoveMember']" type="default" size="small" icon="el-icon-exchange" @click="handleBatchMoveMember">
                批量转移
              </el-button>
            </div>
          </div>
          
          <!-- 成员搜索 -->
          <div class="dept-member-search">
            <el-input
              v-model="memberSearchKey"
              placeholder="搜索成员..."
              prefix-icon="el-icon-search"
              clearable
              size="small"
              @keyup.enter.native="handleMemberSearch"
            ></el-input>
          </div>
          
          <!-- 成员列表 -->
          <div class="dept-member-list">
            <el-table
              v-loading="memberLoading"
              :data="memberList"
              style="width: 100%"
              height="calc(100vh - 500px)"
            >
              <el-table-column prop="avatar" label="头像" width="60">
                <template #default="{ row }">
                  <img :src="row.avatar" alt="用户头像" class="user-avatar" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
                <template #default="{ row }">
                  <span class="user-name">{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="position" label="职位" width="150">
                <template #default="{ row }">
                  <span class="user-position">{{ row.position }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="role" label="角色" width="150">
                <template #default="{ row }">
                  <span class="user-role">{{ row.role }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="joinTime" label="加入时间" width="120">
                <template #default="{ row }">
                  <span class="user-join-time">{{ row.joinTime }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
                    {{ row.status === 1 ? '在职' : '离职' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button v-hasPermi="['system:dept:viewMember']" type="text" size="small" icon="el-icon-view" @click="handleViewMember(row.id)">
                    详情
                  </el-button>
                  <el-button v-hasPermi="['system:dept:moveMember']" type="text" size="small" icon="el-icon-exchange" @click="handleMoveMember(row.id)">
                    转移
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <!-- 分页 -->
          <div class="dept-member-pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalMembers"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新增/编辑部门弹窗 -->
    <el-dialog
      v-model="deptModalVisible"
      :title="isEditMode ? '编辑部门' : '新增部门'"
      width="600px"
      destroy-on-close
    >
      <el-form
        ref="deptFormRef"
        :model="deptForm"
        :rules="deptFormRules"
        label-width="100px"
      >
        <!-- 上级部门 -->
        <el-form-item label="上级部门" prop="parentId">
          <el-tree-select
            v-model="deptForm.parentId"
            :data="orgTreeData"
            :props="{ label: 'name', value: 'id', children: 'children' }"
            placeholder="请选择上级部门"
            :disabled="isEditMode && selectedDept.type === 'company'"
            clearable
          ></el-tree-select>
        </el-form-item>
        
        <!-- 部门名称 -->
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="deptForm.name" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        
        <!-- 部门负责人 -->
        <el-form-item label="部门负责人" prop="leaderId">
          <el-select v-model="deptForm.leaderId" placeholder="请选择部门负责人" clearable>
            <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"></el-option>
          </el-select>
        </el-form-item>
        
        <!-- 部门描述 -->
        <el-form-item label="部门描述" prop="description">
          <el-input v-model="deptForm.description" type="textarea" :rows="3" placeholder="请输入部门描述信息"></el-input>
        </el-form-item>
        
        <!-- 部门状态 -->
        <el-form-item label="部门状态" prop="status">
          <el-radio-group v-model="deptForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deptModalVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { OfficeBuilding } from '@element-plus/icons-vue'

// 导入API服务
import { getOrgTree, getDeptInfo, getDeptMembers, addDept, updateDept, deleteDept, getUsers } from '@/api/system/dept'

// 组织架构树数据
const orgTreeData = ref<Array<any>>([])
const orgTreeProps = {
  label: 'name',
  children: 'children',
  isLeaf: (data: any) => !data.children || data.children.length === 0
}
const loading = ref(false)
const selectedDeptId = ref('')
const selectedDept = ref<any>(null)
const totalDepts = ref(0)
const totalMembers = ref(0)

// 成员列表数据
const memberList = ref<Array<any>>([])
const memberLoading = ref(false)
const memberSearchKey = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 弹窗相关
const deptModalVisible = ref(false)
const isEditMode = ref(false)
const deptFormRef = ref()
const deptForm = reactive({
  id: '',
  parentId: '',
  name: '',
  leaderId: '',
  description: '',
  status: 1
})
const deptFormRules = {
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 1, max: 20, message: '部门名称长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择部门状态', trigger: 'change' }
  ]
}

// 用户列表
const userList = ref<Array<any>>([])

// 初始化数据
onMounted(() => {
  loadOrgTree()
  loadUserList()
})

// 加载组织架构树
const loadOrgTree = async () => {
  loading.value = true
  try {
    const res = await getOrgTree()
    orgTreeData.value = res.data || []
    totalDepts.value = calculateTotalDepts(res.data || [])
    
    // 默认选中第一个节点
    if (orgTreeData.value.length > 0) {
      handleNodeClick(orgTreeData.value[0])
    }
  } catch (error) {
    ElMessage.error('加载组织架构失败')
  } finally {
    loading.value = false
  }
}

// 计算总部门数
const calculateTotalDepts = (treeData: Array<any>): number => {
  let count = 0
  treeData.forEach(node => {
    count++
    if (node.children && node.children.length > 0) {
      count += calculateTotalDepts(node.children)
    }
  })
  return count
}

// 节点点击事件
const handleNodeClick = async (data: any) => {
  selectedDeptId.value = data.id
  try {
    const res = await getDeptInfo(data.id)
    selectedDept.value = res.data
    totalMembers.value = res.data.memberCount || 0
    await loadDeptMembers(data.id)
  } catch (error) {
    ElMessage.error('加载部门信息失败')
  }
}

// 加载部门成员
const loadDeptMembers = async (deptId: string) => {
  memberLoading.value = true
  try {
    const res = await getDeptMembers(deptId, {
      page: currentPage.value,
      pageSize: pageSize.value,
      keyword: memberSearchKey.value
    })
    memberList.value = res.data.list || []
    totalMembers.value = res.data.total || 0
  } catch (error) {
    ElMessage.error('加载成员列表失败')
  } finally {
    memberLoading.value = false
  }
}

// 加载用户列表
const loadUserList = async () => {
  try {
    const res = await getUsers({
      current: 1,
      size: 1000, // 获取足够多的用户用于选择
      status: 1 // 只获取启用的用户
    })
    userList.value = res.data?.records || res.data || []
  } catch (error) {
    ElMessage.error('加载用户列表失败')
  }
}

// 展开全部树
const expandAllTree = () => {
  nextTick(() => {
    (document.querySelector('.el-tree') as any)?.setAttribute('expand-on-click-node', 'true')
    (document.querySelector('.el-tree') as any)?.setAttribute('default-expand-all', 'true')
  })
}

// 收起全部树
const collapseAllTree = () => {
  nextTick(() => {
    (document.querySelector('.el-tree') as any)?.setAttribute('expand-on-click-node', 'true')
    (document.querySelector('.el-tree') as any)?.setAttribute('default-expand-all', 'false')
  })
}

// 处理搜索成员
const handleMemberSearch = () => {
  currentPage.value = 1
  if (selectedDeptId.value) {
    loadDeptMembers(selectedDeptId.value)
  }
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  if (selectedDeptId.value) {
    loadDeptMembers(selectedDeptId.value)
  }
}

// 页码变化
const handleCurrentChange = (current: number) => {
  currentPage.value = current
  if (selectedDeptId.value) {
    loadDeptMembers(selectedDeptId.value)
  }
}

// 新增部门
const handleAdd = () => {
  isEditMode.value = false
  Object.assign(deptForm, {
    id: '',
    parentId: selectedDeptId.value || '',
    name: '',
    leaderId: '',
    description: '',
    status: 1
  })
  deptModalVisible.value = true
}

// 编辑部门
const handleEdit = () => {
  if (!selectedDept.value) return
  
  isEditMode.value = true
  Object.assign(deptForm, {
    id: selectedDept.value.id,
    parentId: selectedDept.value.parentId || '',
    name: selectedDept.value.name,
    leaderId: selectedDept.value.leaderId || '',
    description: selectedDept.value.description || '',
    status: selectedDept.value.status
  })
  deptModalVisible.value = true
}

// 删除部门
const handleDelete = () => {
  if (!selectedDept.value) return
  
  ElMessageBox.confirm(
    '确定要删除这个部门吗？删除后将无法恢复，且部门下的成员将被转移到其他部门。',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await deleteDept(selectedDept.value.id)
      ElMessage.success('部门删除成功')
      await loadOrgTree()
    } catch (error) {
      ElMessage.error('部门删除失败')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!deptFormRef.value) return
  
  try {
    await deptFormRef.value.validate()
    
    if (isEditMode.value) {
      await updateDept(deptForm)
      ElMessage.success('部门编辑成功')
    } else {
      await addDept(deptForm)
      ElMessage.success('部门创建成功')
    }
    
    deptModalVisible.value = false
    await loadOrgTree()
  } catch (error) {
    ElMessage.error(isEditMode.value ? '部门编辑失败' : '部门创建失败')
  }
}

// 添加成员
const handleAddMember = () => {
  if (!selectedDept.value) {
    ElMessage.warning('请先选择一个部门')
    return
  }
  // 这里可以跳转到添加成员页面或打开添加成员弹窗
  ElMessage.info('添加成员功能待实现')
}

// 批量转移成员
const handleBatchMoveMember = () => {
  if (!selectedDept.value) {
    ElMessage.warning('请先选择一个部门')
    return
  }
  ElMessage.info('批量转移成员功能待实现')
}

// 查看成员详情
const handleViewMember = (userId: string) => {
  // 跳转到用户详情页面
  ElMessage.info('查看成员详情功能待实现')
}

// 转移成员
const handleMoveMember = (userId: string) => {
  ElMessage.info('转移成员功能待实现')
}

// 导入部门
const handleImport = () => {
  ElMessage.info('导入部门功能待实现')
}

// 导出部门
const handleExport = () => {
  ElMessage.info('导出部门功能待实现')
}

// 获取部门图标样式
const getDeptIconClass = (type: string) => {
  const iconClasses = {
    company: 'text-primary',
    tech: 'text-info',
    marketing: 'text-warning',
    finance: 'text-success',
    hr: 'text-danger',
    sales: 'text-info'
  }
  return iconClasses[type as keyof typeof iconClasses] || 'text-primary'
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

/* 页面标题和操作按钮 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  
  &__title {
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
      margin: 0;
    }
    p {
      font-size: 14px;
      color: #999999;
      margin: 8px 0 0 0;
    }
  }
  
  &__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* 内容区域 */
.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  
  @media (max-width: 1200px) {
    grid-template-columns: 1fr;
  }
}

/* 组织架构树容器 */
.org-tree-container {
  height: fit-content;
}

.org-tree-card {
  overflow: hidden;
  
  .org-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    
    .org-tree-title {
      font-weight: 500;
      color: #666666;
    }
    
    .org-tree-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .org-tree-content {
    padding: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    
    .org-tree-item {
      display: flex;
      align-items: center;
      padding: 6px 0;
      cursor: pointer;
      
      &-active {
        background-color: rgba(0, 0, 0, 0.05);
        color: #000000;
        border-radius: 4px;
      }
      
      span {
        margin-left: 8px;
      }
    }
  }
  
  .org-tree-footer {
    padding: 12px 16px;
    background-color: #f5f5f5;
    border-top: 1px solid #dddddd;
    font-size: 14px;
    color: #666666;
    
    .org-tree-count {
      font-weight: 500;
      color: #000000;
    }
  }
}

/* 部门详情容器 */
.dept-detail-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 部门详情卡片 */
.dept-detail-card {
  overflow: hidden;
  
  .dept-detail-header {
    padding: 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    
    .dept-detail-title {
      font-weight: 500;
      color: #666666;
    }
  }
  
  .dept-detail-content {
    padding: 24px;
    
    .dept-detail-header-info {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      
      .dept-detail-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
      }
      
      .dept-detail-name {
        flex: 1;
        
        h3 {
          font-size: 20px;
          font-weight: 600;
          color: #333333;
          margin: 0 0 4px 0;
        }
        p {
          font-size: 14px;
          color: #999999;
          margin: 0;
        }
      }
      
      .dept-detail-actions {
        display: flex;
        gap: 8px;
      }
    }
    
    .dept-detail-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
      
      .dept-detail-section {
        
        h4 {
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          margin: 0 0 16px 0;
        }
        
        .dept-detail-item {
          display: flex;
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .dept-detail-label {
            width: 100px;
            font-size: 14px;
            color: #999999;
          }
          
          .dept-detail-value {
            font-size: 14px;
            color: #333333;
            flex: 1;
          }
        }
      }
    }
    
    .dept-detail-description {
      
      h4 {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        margin: 0 0 12px 0;
      }
      
      .dept-detail-desc-content {
        padding: 16px;
        background-color: #f5f5f5;
        border-radius: 4px;
        font-size: 14px;
        color: #666666;
        line-height: 1.6;
      }
    }
  }
}

/* 部门成员卡片 */
.dept-member-card {
  overflow: hidden;
  
  .dept-member-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    
    .dept-member-title {
      font-weight: 500;
      color: #666666;
    }
    
    .dept-member-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .dept-member-search {
    padding: 16px;
    border-bottom: 1px solid #dddddd;
  }
  
  .dept-member-list {
    max-height: calc(100vh - 500px);
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    
    .user-name {
      font-size: 14px;
      color: #333333;
    }
    
    .user-position {
      font-size: 14px;
      color: #666666;
    }
    
    .user-role {
      font-size: 14px;
      color: #666666;
    }
    
    .user-join-time {
      font-size: 14px;
      color: #999999;
    }
  }
  
  .dept-member-pagination {
    padding: 16px;
    border-top: 1px solid #dddddd;
    display: flex;
    justify-content: flex-end;
  }
}
</style>